<template>
	<view>
		<view>
			<cu-custom bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">工资明细</block>
			</cu-custom>
			<view class="margin-lr radius-lg shadow shadow-lg bg-white margin-top padding-lr-sm padding-top-sm">
				<view class="flex justify-between align-center bg-white solid-bottom padding-bottom-sm padding-lr-xs">
					<view class="action text-lg text-bold">
						<text class="cuIcon-titles text-blue"></text>月工资
					</view>
				</view>
				<view class="cu-list grid col-3">
					<view class="cu-item">
						<view class="text-gray">月薪</view>
						<view class="text-bold text-price text-lg margin-top-xs">{{ totalAmount || '0' }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">个人社保</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ socialSecurityInfo.personalAmount || '0' }}
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">个人公积金</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ housingFundInfo.personalAmount || '0' }}
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">公司成本</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{  calcResp.companyCostAmount || '0' }}
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">公司社保</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ socialSecurityInfo.companyAmount || '0' }}
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">公司公积金</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ housingFundInfo.companyAmount || '0' }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="margin">
			<view class="radius-lg shadow shadow-lg bg-white margin-top padding-tb">
				<view class="cu-list card-menu grid col-5">
					<view class="padding-tb-sm text-sm bg-gray">月份</view>
					<view class="padding-tb-sm text-sm bg-gray">应纳所得税</view>
					<view class="padding-tb-sm text-sm bg-gray">税率</view>
					<view class="padding-tb-sm text-sm bg-gray">个税金额</view>
					<view class="padding-tb-sm text-sm bg-gray">到手金额</view>
					<block v-for="(item, index) in taxCalcDetailList">
						<view class="padding-tb-sm text-sm text-grey solid-bottom solid-top">{{ index + 1 }}</view>
						<view class="padding-tb-sm text-sm text-grey solid-bottom solid-top">{{ item.calcTaxAmount }}
						</view>
						<view class="padding-tb-sm text-sm text-grey solid-bottom solid-top">
							{{ filterRate(item.taxRateId) }}%
						</view>
						<view class="padding-tb-sm text-sm text-grey solid-bottom solid-top" @tap="showCalcRateRule"
							:data-cur-period-index='index'>
							<text class="text-blue"
								style="border-bottom: 1px #0081ff solid;">{{ item.taxAmount }}</text>
						</view>
						<view class="padding-tb-sm text-sm text-grey solid-bottom solid-top">
							{{ item.earnedSalaryAmount }}
						</view>
					</block>
					<view class="padding-tb-sm text-sm text-bold">合计</view>
					<view class="padding-tb-sm text-sm text-bold">--</view>
					<view class="padding-tb-sm text-sm text-bold">--</view>
					<view class="padding-tb-sm text-sm text-bold">{{ salarySummary.salaryAnnualTaxAmount }}</view>
					<view class="padding-tb-sm text-sm text-bold">{{ salarySummary.salaryAnnualEarnedAmount }}</view>
				</view>
			</view>
		</view>
		<view class="safe-bottom"></view>
		<tax-modal :cur-period-index="curPeriodIndex" :modal-visible="modalVisible"
			@close="() => modalVisible = false" />
	</view>
</template>

<script>
	import {
		appMixin
	} from '@/store/app-mixin'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				size: '',
				curTaxRateId: 0,
				// 当前期数
				curPeriodIndex: 0,
				modalVisible: false
			}
		},
		mixins: [appMixin],
		mounted() {
			if (!this.calcResp.totalAmount) {
				this.$store.dispatch('calc')
			}
		},
		methods: {
			showCalcRateRule(e) {
				this.curPeriodIndex = e.currentTarget.dataset.curPeriodIndex
				this.curTaxRateId = this.taxCalcDetailList[this.curPeriodIndex].taxRateId
				this.modalVisible = true
			},
			filterRate(id) {
				const curRate = this.taxRule.taxRateDetailList.find(item => item.id == id)
				return curRate ? curRate.rate : '--'
			}
		}
	}
</script>

<style>

</style>